{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 29,
   "metadata": {
    "format": "column"
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_29\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_29\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_29\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_29\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_29\">\n",
       "  <b>Sketch #29:</b><br/>\n",
       "  <canvas id=\"canvas_29\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_29\">\n",
       "  <button id=\"run_button_29\" onclick=\"startSketch('29');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_29\" onclick=\"pauseSketch('29');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_29\" onclick=\"setupSketch('29');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_29\" onclick=\"drawSketch('29');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #29 state:</b> <span id=\"state_29\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'float x;\\nfloat y;\\nfloat dy;\\nfloat t;\\nfloat houstonX;\\n\\nvoid setup() {\\n    size(250, 250);\\n    frameRate(10);\\n    x = width/2;\\n    y = 200;\\n    dy = -1;\\n    t = 0;\\n    houstonX = 0;\\n}\\n\\nvoid drawRocket(float x, float y, float scale) {\\n    // Body:\\n    fill(255, 255, 0);\\n    stroke(0);\\n    rect(x - 25, y - 50, 50, 100);\\n    // Nose cone:\\n    triangle(x - 25, y - 50,  // left\\n             x, y - 50 - 75,  // center\\n             x + 25, y - 50); // right\\n    // Left fin:\\n    triangle(x - 25, y, \\n             x - 25, y + 50, \\n             x - 50, y + 50);\\n    // Right fin:\\n    triangle(x + 25, y, \\n             x + 25, y + 50, \\n             x + 50, y + 50);\\n}\\n\\nvoid houston(float x, float y) {\\n    fill(0);\\n    stroke(0);\\n    float w = 50;\\n    rect(x, y - 10, w, 10);\\n    rect(x + w, y - 30, w, 30);\\n    rect(x + w * 2, y - 20, w, 20);\\n    rect(x + w * 3, y - 5, w, 5);\\n    rect(x + w * 4, y - 70, w, 70);\\n    rect(x + w * 5, y - 20, w, 20);\\n    rect(x + w * 6, y - 5, w, 5);\\n    rect(x + w * 7, y - 40, w, 40);\\n    rect(x + w * 8, y - 25, w, 25);\\n    rect(x + w * 9, y - 5, w, 5);\\n    rect(x + w * 10, y - 40, w, 40);\\n    rect(x + w * 11, y - 20, w, 20);\\n    rect(x + w * 12, y - 15, w, 15);\\n    rect(x + w * 13, y - 60, w, 60);\\n    rect(x + w * 14, y - 20, w, 20);\\n}\\n\\nvoid speak(String t, float x, float y) {\\n    float h = 30;\\n    float w = 120;\\n    float q = 10;\\n    fill(255);\\n    stroke(0);\\n    triangle(x, y, x + q, y - h, x + 2 * q, y - h);\\n    rect(x, y - 2 * h, w, h);\\n    // tiny box to cover line:\\n    fill(255);\\n    stroke(255);\\n    rect(x + q, y - h - 2, q - 2, 2);\\n    fill(0);\\n    text(t, x + q, y - h - q);\\n}\\n\\nvoid kevin(float x, float y) {\\n    fill(20, 60, 120);\\n    stroke(20, 60, 120);\\n    ellipse(x, y, 10, 20);\\n}\\n\\nvoid draw() {\\n    background(0, 0, 255);\\n    if (t < 10) {\\n        houstonX = houstonX - 5;\\n        houston(houstonX, height/2);\\n        kevin(30, height/2 + 20);\\n        //drawRocket(x, y, 1);\\n        // wait for blast off\\n        //speak(\"Countdown ...\" + int(10 - t), x, y);\\n    } else if (t < 20) {\\n        houston(houstonX, height/2);\\n        kevin(30, height/2 + 20);\\n        speak(\"Wanna see a rocket?\", 35, height/2 + 10);\\n        //drawRocket(x, y, 1);\\n        //speak(\"Wheeeeee!\", x, y);\\n    } else if (t < 30) {\\n        houston(houstonX, height/2);\\n        drawRocket(x, y, 1);\\n        kevin(30, height/2 + 20);        \\n    } else if (t < 40) {\\n        y = y + dy;\\n        dy = dy - 0.1;\\n        houston(houstonX, height/2);\\n        drawRocket(x, y, 1);\\n        kevin(30, height/2 + 20);       \\n        speak(\"Wait for me!\", 35, height/2 + 10);\\n    } else {\\n        setup(); // sets t back to 0\\n    } \\n    fill(255); // white text\\n    text(\"Time: \" + int(t), 0, 200);\\n    t = t + .1;\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_29\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_29\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_29\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_29\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_29\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_29\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_29\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_29\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_29\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_29\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_29\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_29\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_29\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_29\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_29\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_29\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_29\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_29\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_29\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_29\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_29\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_29\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_29\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_29\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_29\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_29\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_29\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_29\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "float x;\n",
    "float y;\n",
    "float dy;\n",
    "float t;\n",
    "float houstonX;\n",
    "\n",
    "void setup() {\n",
    "    size(250, 250);\n",
    "    frameRate(10);\n",
    "    x = width/2;\n",
    "    y = 200;\n",
    "    dy = -1;\n",
    "    t = 0;\n",
    "    houstonX = 0;\n",
    "}\n",
    "\n",
    "void drawRocket(float x, float y, float scale) {\n",
    "    // Body:\n",
    "    fill(255, 255, 0);\n",
    "    stroke(0);\n",
    "    rect(x - 25, y - 50, 50, 100);\n",
    "    // Nose cone:\n",
    "    triangle(x - 25, y - 50,  // left\n",
    "             x, y - 50 - 75,  // center\n",
    "             x + 25, y - 50); // right\n",
    "    // Left fin:\n",
    "    triangle(x - 25, y, \n",
    "             x - 25, y + 50, \n",
    "             x - 50, y + 50);\n",
    "    // Right fin:\n",
    "    triangle(x + 25, y, \n",
    "             x + 25, y + 50, \n",
    "             x + 50, y + 50);\n",
    "}\n",
    "\n",
    "void houston(float x, float y) {\n",
    "    fill(0);\n",
    "    stroke(0);\n",
    "    float w = 50;\n",
    "    rect(x, y - 10, w, 10);\n",
    "    rect(x + w, y - 30, w, 30);\n",
    "    rect(x + w * 2, y - 20, w, 20);\n",
    "    rect(x + w * 3, y - 5, w, 5);\n",
    "    rect(x + w * 4, y - 70, w, 70);\n",
    "    rect(x + w * 5, y - 20, w, 20);\n",
    "    rect(x + w * 6, y - 5, w, 5);\n",
    "    rect(x + w * 7, y - 40, w, 40);\n",
    "    rect(x + w * 8, y - 25, w, 25);\n",
    "    rect(x + w * 9, y - 5, w, 5);\n",
    "    rect(x + w * 10, y - 40, w, 40);\n",
    "    rect(x + w * 11, y - 20, w, 20);\n",
    "    rect(x + w * 12, y - 15, w, 15);\n",
    "    rect(x + w * 13, y - 60, w, 60);\n",
    "    rect(x + w * 14, y - 20, w, 20);\n",
    "}\n",
    "\n",
    "void speak(String t, float x, float y) {\n",
    "    float h = 30;\n",
    "    float w = 120;\n",
    "    float q = 10;\n",
    "    fill(255);\n",
    "    stroke(0);\n",
    "    triangle(x, y, x + q, y - h, x + 2 * q, y - h);\n",
    "    rect(x, y - 2 * h, w, h);\n",
    "    // tiny box to cover line:\n",
    "    fill(255);\n",
    "    stroke(255);\n",
    "    rect(x + q, y - h - 2, q - 2, 2);\n",
    "    fill(0);\n",
    "    text(t, x + q, y - h - q);\n",
    "}\n",
    "\n",
    "void kevin(float x, float y) {\n",
    "    fill(20, 60, 120);\n",
    "    stroke(20, 60, 120);\n",
    "    ellipse(x, y, 10, 20);\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    background(0, 0, 255);\n",
    "    if (t < 10) {\n",
    "        houstonX = houstonX - 5;\n",
    "        houston(houstonX, height/2);\n",
    "        kevin(30, height/2 + 20);\n",
    "        //drawRocket(x, y, 1);\n",
    "        // wait for blast off\n",
    "        //speak(\"Countdown ...\" + int(10 - t), x, y);\n",
    "    } else if (t < 20) {\n",
    "        houston(houstonX, height/2);\n",
    "        kevin(30, height/2 + 20);\n",
    "        speak(\"Wanna see a rocket?\", 35, height/2 + 10);\n",
    "        //drawRocket(x, y, 1);\n",
    "        //speak(\"Wheeeeee!\", x, y);\n",
    "    } else if (t < 30) {\n",
    "        houston(houstonX, height/2);\n",
    "        drawRocket(x, y, 1);\n",
    "        kevin(30, height/2 + 20);        \n",
    "    } else if (t < 40) {\n",
    "        y = y + dy;\n",
    "        dy = dy - 0.1;\n",
    "        houston(houstonX, height/2);\n",
    "        drawRocket(x, y, 1);\n",
    "        kevin(30, height/2 + 20);       \n",
    "        speak(\"Wait for me!\", 35, height/2 + 10);\n",
    "    } else {\n",
    "        setup(); // sets t back to 0\n",
    "    } \n",
    "    fill(255); // white text\n",
    "    text(\"Time: \" + int(t), 0, 200);\n",
    "    t = t + .1;\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_1\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_1\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_1\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_1\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_1\">\n",
       "  <b>Sketch #1:</b><br/>\n",
       "  <canvas id=\"canvas_1\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_1\">\n",
       "  <button id=\"run_button_1\" onclick=\"startSketch('1');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_1\" onclick=\"pauseSketch('1');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_1\" onclick=\"setupSketch('1');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_1\" onclick=\"drawSketch('1');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #1 state:</b> <span id=\"state_1\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'String s = \"Tokyo\";\\nfloat sw = textWidth(s);\\ntext(s, 0, 85);\\nline(sw, 50, sw, 100);';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_1\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_1\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_1\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_1\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_1\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_1\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_1\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_1\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_1\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_1\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_1\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_1\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_1\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_1\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_1\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_1\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_1\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_1\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_1\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_1\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_1\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_1\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_1\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_1\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_1\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_1\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_1\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_1\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "String s = \"Tokyo\";\n",
    "float sw = textWidth(s);\n",
    "text(s, 0, 85);\n",
    "line(sw, 50, sw, 100);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Calysto Processing",
   "language": "java",
   "name": "calysto_processing"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "text/x-java",
    "version": 2
   },
   "file_extension": ".java",
   "mimetype": "text/x-java",
   "name": "java"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}